<template>
  <div class="carManage">
    <div class="mainPage" v-if="!isAdd">
      <div class="search">
        <el-form :inline="true" :model="carManage" class="demo-form-inline companyAdd">
          <el-form-item label="单位名称">
            <el-input v-model="carManage.companyName" placeholder="单位名称"></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="carManage.carNumber" placeholder="请填写车牌号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-form-item label="车辆属性">
              <el-select v-model="carManage.position" placeholder="车辆属性" @change="getCarType">
                <el-option label="小货车" value="1"></el-option>
                <el-option label="车头" value="2"></el-option>
                <el-option label="车身" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="resetSeachConditions">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="addBtn" @click="addCar">新增</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="carNumber" label="车牌号"></el-table-column>
          <el-table-column label="车辆属性">
            <template slot-scope="scope">
              <span>{{scope.row.position==1?'小货车':scope.row.position==2?'车头':scope.row.position==3?'车身':'N/A'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="companyName" label="单位名称"></el-table-column>
          <el-table-column prop="carType" label="车辆类型"></el-table-column>
          <el-table-column prop="weight" label="载重量(吨)"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <div class="carAdd" v-if="isAdd">
      <el-button type="private" size="small" @click="goBack">返回</el-button>
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="车牌号" prop="carNumber">
          <el-input v-model="addForm.carNumber"></el-input>
        </el-form-item>
        <el-form-item label="车辆属性" prop="position">
          <el-select v-model="addForm.position" placeholder="车辆属性">
            <el-option label="小货车" value="1"></el-option>
            <el-option label="车头" value="2"></el-option>
            <el-option label="车身" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属单位" prop="companyName">
          <!-- <el-input v-model="addForm.companyName" placeholder="所属单位"></el-input> -->
          <InputSearch @changes="getCompanyId" :val="defaultValue" />
        </el-form-item>
        <el-form-item label="车辆类型" prop="carType">
          <el-input v-model="addForm.carType"></el-input>
        </el-form-item>
        <el-form-item label="载重量" prop="weight">
          <el-input v-model.number="addForm.weight"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit('addForm')">确定</el-button>
          <el-button @click="cancleUpdate">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import InputSearch from "@/components/InputSearch/InputSearch";
export default {
  name: "CarManage",
  inject: ["reload"],
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      carManage: {
        companyName: "",
        carNumber: "",
        position: ""
      },
      addForm: {
        carNumber: "",
        position: "",
        superviseCompany: "",
        carType: "",
        weight: ""
      },
      defaultValue: "",
      rules: {
        carNumber: [{
          required: true,
          message: "请填写车牌号",
          triggle: "blur"
        }],
        carProperty: [{
          required: true,
          message: "请选择车辆属性",
          triggle: "change"
        }],
        superviseCompany: [{
          required: true,
          message: "请填写所属公司",
          triggle: "blur"
        }],
        weight: [{
          type: "number",
          required: true,
          message: "请填写载重量",
          triggle: "blur"
        }],
        carType: [{
          required: true,
          message: "请填写车辆类型",
          triggle: "blur"
        }]
      },
      isAdd: false,
      currentPage: 1,
      total: 0,
      isUpdate: false
    };
  },
  created() {
    this.initList();
  },
  mounted() {},
  methods: {
    initList() {
      this.$common
        .$ajax(
          "/ys/car/list", {
            page: this.page,
            limit: this.limit,
            position: this.carManage.position,
            companyName: this.carManage.companyName,
            carNumber: this.carManage.carNumber
          },
          "get"
        )
        .then(res => {
          this.tableData = res.data.body.list;
          this.total = res.data.body.totalCount;
        });
    },
    getCompanyId(val) {
      console.log(val);
      this.addForm.companyId = val[0].value;
    },
    getCarType() {},
    addCar() {
      this.isAdd = true;
    },
    onSearch() {
      this.initList();
    },
    resetSeachConditions() {
      this.carManage.companyName = "";
      this.carManage.carNumber = "";
      this.carManage.position = "";
      this.initList();
    },
    // 编辑车辆信息
    handleUpdate(scope) {
      console.log(scope);
      this.isAdd = true;
      this.isUpdate = true;
      // 赋值
      this.addForm.carNumber = scope.carNumber;
      this.addForm.position = scope.position;
      this.defaultValue = scope.companyName;
      this.addForm.id = scope.id;
      this.addForm.carType = scope.carType;
      this.addForm.weight = scope.weight;
    },
    // 删除车辆
    handleDelete(scope) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$common
            .$ajax("/ys/car/delete", { carId: scope.id }, "get")
            .then(res => {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.reload();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.$common
              .$ajax("/ys/car/update", this.addForm, "post")
              .then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
                this.reload();
              });
          } else {
            this.$common
              .$ajax(
                "/ys/car/save", {
                  carNumber: this.addForm.carNumber,
                  carType: this.addForm.carType,
                  companyId: this.addForm.companyId,
                  position: this.addForm.position,
                  weight: this.addForm.weight
                },
                "post"
              )
              .then(res => {
                this.$message({
                  type: "success",
                  message: "新增成功"
                });
                this.reload();
              });
          }
        } else {
          console.log("error submit");
        }
      });
    },
    cancleUpdate() {},
    goBack() {
      this.reload();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initList();
    }
  },
  components: {
    InputSearch
  }
};

</script>
<style lang="scss" scoped>
.carManage {
  .search {
    display: flex;
    justify-content: space-between;

    .addBtn {
      height: 40px;
    }
  }
}

.demo-ruleForm {
  width: 50%;
  margin: 0 auto;
}

</style>
